import React, { Component } from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity, Picker, DeviceEventEmitter, Platform} from 'react-native';
import Confirm from '../../components/confirm/Confirm'
import LinearGradient from 'react-native-linear-gradient'
import { DeviceStorage } from "../../utils/DeviceStorage";
import { base } from "../../assets/style";
import {getUserInfo} from "../../utils/login";
import { i18n } from "../../utils/locales/i18n";
import { LANG, KYC_STATUS } from "../../config";



type Props = {};
export default class MineScreen extends Component<Props> {
	static navigationOptions = {
		header: null,
		headerBackTitle: null
	}
	constructor() {
		super()
		this.state = {
			userInfo: {
				AreCode: "",
				AssPass: false,
				BankInfo: null,
				Email: "----",
				GoogleAuth: "----",
				GoogleOpen: 0,
				HadAd: 0,
				// 0 未提交 1 待审核 2 通过 3 未通过
				Kyc: 0,
				Name: "",
				Phone: "",
				TxFail: 0,
				TxSuc: 0,
				Username: "---"
			},
			showConfirm: false,
			level: '--'
		}
	}
	componentDidMount(): void {
		this._getUserInfo()
		DeviceEventEmitter.addListener('refresh_user_info', () => {
			this._getUserInfo()
		})
	}
	caculateLevel = () => {
		const { AssPass, Email, GoogleOpen, Kyc, Phone } = this.state.userInfo
		const levelObj = { AssPass, Email, GoogleOpen, Kyc, Phone }
		let level = 0
		// 0 未提交 1 待审核 2 通过 3 未通过
		for (let key in levelObj) {
			if (key === 'Kyc' && levelObj[key] === 2) {
				level += 2
			} else if (levelObj[key]) {
				level += 1
			}
		}
		switch (level) {
			case 0:
			case 1:
			case 2:
				this.setState({level: i18n.t('low')})
				break
			case 3:
			case 4:
				this.setState({level: i18n.t('middle')})
				break
			case 5:
			case 6:
				this.setState({level: i18n.t('high')})
				break
		}
	}
	// 从deviceStorage获取user info
	_getUserInfo = async () => {
		await getUserInfo()
		const jwt = await DeviceStorage.get('jwt')
		if (jwt) {
			const userInfoJson = await DeviceStorage.get('user_info')
			this.setState({
				userInfo: JSON.parse(userInfoJson)
			}, () => {
				this.caculateLevel()
			})
		} else {
			// 没有登录，跳到登录页
			this.props.navigation.navigate('LoginScreen')
		}
	}
	toMyAssets = () => {
		this.props.navigation.navigate('MyAssets')
	}
	logout = async () => {
		await DeviceStorage.delete('user_info')
		await DeviceStorage.delete('jwt')
		this.props.navigation.navigate('LoginScreen')
	}
	render() {
		return (
			<View style={[styles.container]}>
				<Confirm
					modalVisible={this.state.showConfirm}
					handleCancelOrder={() => this.setState({showConfirm: false})}
					handleConfirmOrder={() => this.logout()}
					negative={i18n.t('cancel')}
					positive={i18n.t('confirm')}
					title={i18n.t('info')}
				>
					<View style={[base.flex_1, base.flex_col_center]}>
						<Text>{ i18n.t('info1') }</Text>
					</View>
				</Confirm>
				{/*渐变背景*/}
				{/*<LinearGradient*/}
					{/*start={{x: 0, y: 0}}*/}
					{/*end={{x: 1, y: 1}}*/}
					{/*colors={['#feac1c', '#ff7506']}*/}
					{/*style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: 220 }}*/}
				{/*>*/}
					{/*<View/>*/}
				{/*</LinearGradient>*/}
				{/*纯色背景*/}
				<View
					style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: 220, backgroundColor: '#ff7606' }}
				>
				</View>
				{/*header*/}
				<View style={[styles.content_container, { paddingTop: Platform.OS === 'ios' ? 60 : 20 }]}>
					<View style={[styles.flex_row_between]}>
						<View style={[styles.flex_row_start, { paddingVertical: 5, borderBottomWidth: 1, borderBottomColor: '#fff' }]}>
							<Text style={[styles.color_white, { fontSize: 28 }]}>{ this.state.userInfo.Username }</Text>
							{/*<TouchableOpacity>*/}
								{/*<Image style={{width: 15, height: 15, marginLeft: 10, marginTop: 5}} source={require('../../images/mine/edit.png')}/>*/}
							{/*</TouchableOpacity>*/}
						</View>
						<View>
							<TouchableOpacity onPress={() => this.setState({ showConfirm: true })}>
								<View><Text style={[styles.color_white, {fontSize: 18}]}>{ i18n.t('lo') }</Text></View>
							</TouchableOpacity>
						</View>
					</View>
					<View style={[styles.flex_row_start, { paddingVertical: 5 }]}>
						<Text style={[styles.color_white]}>{ i18n.t('t_sum') } </Text><Text style={[styles.color_white]}> { this.state.userInfo.TxSuc }</Text>
						<Text style={[styles.color_white]}> | </Text>
						<Text style={[styles.color_white]}>{ i18n.t('t_rate') } </Text>
						<Text style={[styles.color_white]}>
							{ (Number(this.state.userInfo.TxFail) + Number(this.state.userInfo.TxSuc)) === 0 ? 0 : (Number(this.state.userInfo.TxSuc) / (Number(this.state.userInfo.TxFail) + Number(this.state.userInfo.TxSuc)) * 100).toFixed(2) }%
						</Text>
					</View>
				</View>
				{/*tow options*/}
				<View style={[styles.content_container, { marginTop: 20 }]}>
					<View style={[styles.flex_row_between, { backgroundColor: '#fff', borderRadius: 5, height: 130 }]}>
						{/*<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>*/}
							{/*<TouchableOpacity onPress={ () => this.props.navigation.navigate('MyMiner') } style={{ width: 70, height: '100%', justifyContent: 'center', alignItems: 'center' }}>*/}
								{/*<Image source={require('../../images/mine/icon-miner.png')} style={{ width: 42, height: 30 }}/>*/}
								{/*<View style={{marginTop: 10}}><Text style={{color: '#ff7606', fontSize: 15}}>{ i18n.t('m_miner') }</Text></View>*/}
							{/*</TouchableOpacity>*/}
						{/*</View>*/}
						{/*<View style={{width: 1, height: 70, backgroundColor: '#eee'}}/>*/}
						<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
							<TouchableOpacity onPress={ this.toMyAssets } style={{ width: 70, height: '100%', justifyContent: 'center', alignItems: 'center' }}>
								<Image source={require('../../images/mine/icon-assets.png')} style={{ width: 42, height: 30 }}/>
								<View style={{marginTop: 10}}><Text style={{color: '#ff7606', fontSize: 15}}>{ i18n.t('m_as') }</Text></View>
							</TouchableOpacity>
						</View>
					</View>
				</View>
				{/*settings*/}
				<View style={[styles.content_container, {flex: 1}]}>
					<View style={[{ backgroundColor: '#fff', borderRadius: 5, marginTop: 10 }]}>
						{/*an setting item*/}
						<View style={[styles.flex_row_between, { paddingHorizontal: 10, height: 50, borderBottomColor: '#eee', borderBottomWidth: 1 }]}>
							<View style={[styles.flex_row_start]}>
								<Image style={{ width: 15, height: 15 }} resizeMode={'contain'} source={require('../../images/mine/icon-save.png')}/>
								<View style={{paddingLeft: 10}}>
									<Text>{ i18n.t('aas') }</Text>
								</View>
							</View>
							<TouchableOpacity onPress={() => this.props.navigation.navigate('Account')} style={[styles.flex_row_end, {flex: 1, height: '100%'}]}>
								<View style={{paddingRight: 10}}><Text style={{color: '#808080'}}>{ i18n.t('s_le') }  <Text>{ this.state.level }</Text></Text></View>
								<Image style={{ width: 10, height: 10 }} resizeMode={'contain'} source={require('../../images/mine/left-arrow.png')}/>
							</TouchableOpacity>
						</View>
						<View style={[styles.flex_row_between, { paddingHorizontal: 10, height: 50, borderBottomColor: '#eee', borderBottomWidth: 1 }]}>
							<View style={[styles.flex_row_start]}>
								<Image style={{ width: 15, height: 15 }} resizeMode={'contain'} source={require('../../images/mine/icon-verify.png')}/>
								<View style={{paddingLeft: 10}}>
									<Text>{ i18n.t('kyc') }</Text>
								</View>
							</View>
							{ (this.state.userInfo.Kyc === 0 || this.state.userInfo.Kyc === 3) ? (
								<TouchableOpacity onPress={() => this.props.navigation.navigate('Verify')} style={[styles.flex_row_end, {flex: 1, height: '100%'}]}>
									<View style={{paddingRight: 10}}><Text style={{color: '#808080'}}>{ KYC_STATUS[this.state.userInfo.Kyc] }</Text></View>
									<Image style={{ width: 10, height: 10 }} resizeMode={'contain'} source={require('../../images/mine/left-arrow.png')}/>
								</TouchableOpacity>
							) : (
								<TouchableOpacity style={[styles.flex_row_end, {flex: 1, height: '100%'}]}>
									<View style={{paddingRight: 10}}><Text style={{color: '#808080'}}>{ KYC_STATUS[this.state.userInfo.Kyc] }</Text></View>
									<Image style={{ width: 10, height: 10 }} resizeMode={'contain'} source={require('../../images/mine/left-arrow.png')}/>
								</TouchableOpacity>
							) }
						</View>
						<View style={[styles.flex_row_between, { paddingHorizontal: 10, height: 50, borderBottomColor: '#eee', borderBottomWidth: 1 }]}>
							<View style={[styles.flex_row_start]}>
								<Image style={{ width: 15, height: 15 }} resizeMode={'contain'} source={require('../../images/mine/icon-pay.png')}/>
								<View style={{paddingLeft: 10}}>
									<Text>{i18n.t('p_way')}</Text>
								</View>
							</View>
							<TouchableOpacity onPress={() => { this.props.navigation.navigate('PayWay') }} style={[styles.flex_row_end, {flex: 1, height: '100%'}]}>
								<View style={{paddingRight: 10}}><Text style={{color: '#808080'}}>{i18n.t('to_edit')}</Text></View>
								<Image style={{ width: 10, height: 10 }} resizeMode={'contain'} source={require('../../images/mine/left-arrow.png')}/>
							</TouchableOpacity>
						</View>
						<View style={[styles.flex_row_between, { paddingHorizontal: 10, height: 50, borderBottomColor: '#eee', borderBottomWidth: 1 }]}>
							<View style={[styles.flex_row_start]}>
								<Image style={{ width: 15, height: 15 }} resizeMode={'contain'} source={require('../../images/mine/icon-language.png')}/>
								<View style={{paddingLeft: 10}}>
									<Text>{ i18n.t('c_lan') }</Text>
								</View>
							</View>
							<TouchableOpacity onPress={() => { this.props.navigation.navigate('Language') }} style={[styles.flex_row_end, {flex: 1, height: '100%'}]}>
								<View style={{paddingRight: 10}}><Text style={{color: '#808080'}}>{ LANG[i18n.locale] }</Text></View>
								<Image style={{ width: 10, height: 10 }} resizeMode={'contain'} source={require('../../images/mine/left-arrow.png')}/>
							</TouchableOpacity>
						</View>
					</View>
					<View style={[{ backgroundColor: '#fff', borderRadius: 5, marginTop: 10 }]}>
						{/*an setting item*/}
						<View style={[styles.flex_row_between, { paddingHorizontal: 10, height: 50, borderBottomColor: '#eee', borderBottomWidth: 1 }]}>
							<View style={[styles.flex_row_start]}>
								<Image style={{ width: 15, height: 15 }} resizeMode={'contain'} source={require('../../images/mine/icon-help.png')}/>
								<View style={{paddingLeft: 10}}>
									<Text>{ i18n.t('help') }</Text>
								</View>
							</View>
							<TouchableOpacity style={[styles.flex_row_end, {flex: 1, height: '100%'}]}>
								<View style={{paddingRight: 10}}><Text style={{color: '#808080'}}/></View>
								<Image style={{ width: 10, height: 10 }} resizeMode={'contain'} source={require('../../images/mine/left-arrow.png')}/>
							</TouchableOpacity>
						</View>
					</View>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#f2f2f2'
	},
	content_container: {
		width: '100%',
		paddingHorizontal: 10
	},
	flex_row_between: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	flex_row_start: {
		flexDirection: 'row',
		justifyContent: 'flex-start',
		alignItems: 'center'
	},
	flex_row_end: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center'
	},
	color_white: {
		color: '#fff'
	}
})
